<template>
  <Drawer
    @close="closeTimer"
    v-model:visible="showDrawer"
    :centered="false"
    :width="1200"
    cancelText="关闭"
    title="查看文件系统"
  >
    <div class="float-right mb-10px">
      <Button type="primary" @click="openAddFsDrawer" v-if="appArchitecture !== '微服务'">新增文件系统</Button>
    </div>
    <Table
      class="main-table"
      sticky
      :bordered="true"
      :dataSource="list"
      :columns="columns"
      :pagination="false"
      :loading="loading"
    >
      <template #bodyCell="{ column, record }" v-if="appArchitecture === '单体'">
        <template v-if="column.dataIndex === 'operation'">
          <a @click="openExpansionModal(record)">扩容</a>
        </template>
      </template>
    </Table>
    <br />
    <Pagination
      class="float-right"
      show-size-changer
      v-model:current="current"
      v-model:pageSize="pageSize"
      :total="total"
      :show-total="(total) => `共 ${total} 条`"
      @showSizeChange="onShowSizeChange"
    />
  </Drawer>
  <ExpansionModal
    @expandSuccess="getSfsListByPage"
    :appId="props.modelId"
    :sfsUuid="sfsUuid"
    :minSize="minSize"
    ref="ExpansionModalRef"
  ></ExpansionModal>
  <AddFsModal :appId="props.modelId" ref="AddModalRef"></AddFsModal>
</template>

<script lang="ts" setup>
import { ref, computed, watch, nextTick } from 'vue';
import { Drawer, Table, Pagination, Button } from 'ant-design-vue';
import { sfsColumns, obsColumns } from './fsData.data';
import { getSfsList } from '../../../api/system-mgmt/appfs-mgmt/appfs';
import ExpansionModal from './ExpandFsModal.vue';
import AddFsModal from './AddFsModal.vue';
import useIntervalInvoke from '../../../hooks/component/useIntervalInvoke';

const props = defineProps({
  modelId: {
    type: String,
  },
});
const { startTimer, closeTimer } = useIntervalInvoke();
const showDrawer = ref<boolean>(false);
const ExpansionModalRef = ref(null);
const AddModalRef = ref(null);
const list = ref([]);
const sfsUuid = ref<string>('');
const minSize = ref<number>(500);
const columns = ref(sfsColumns);
const appArchitecture = ref();

const loading = ref(true);
const closeDrawer = () => {
  showDrawer.value = false;
};

let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);

const params = computed(() => {
  return {
    current: current.value,
    size: pageSize.value,
    model: props.modelId,
  };
});

const getSfsListByPage = async () => {
  try {
    loading.value = true;
    const res = await getSfsList(params.value);

    if (appArchitecture.value === '单体') {
      list.value = res.fileSystemType.records;
      total.value = res.fileSystemType.total;
    } else if (appArchitecture.value === '微服务') {
      list.value = res.obsResourcePage.records;
      total.value = res.obsResourcePage.total;
    }
  } finally {
    loading.value = false;
  }
};

const openExpansionModal = (record) => {
  nextTick(() => {
    sfsUuid.value = record.sfsUuid;
    minSize.value = record.size;
  });
  ExpansionModalRef.value.openModal();
};

const openAddFsDrawer = () => {
  AddModalRef.value.openModal();
};

const onShowSizeChange = () => {
  getSfsListByPage();
};

watch(current, () => {
  getSfsListByPage();
});

const openDrawer = (architecture: string) => {
  appArchitecture.value = architecture;

  if (appArchitecture.value === '单体') {
    columns.value = sfsColumns;
  } else if (appArchitecture.value === '微服务') {
    columns.value = obsColumns;
  }
  getSfsListByPage();
  startTimer(getSfsListByPage);
  showDrawer.value = true;
};

defineExpose({ openDrawer, closeDrawer });
</script>

<style lang="less" scoped></style>
